<template>
  <div class="stu-create">
    <div>
      <span class="titleSty">提交疑问</span>
    </div>
    <div class="homeworkList">
      <div class="body">
        <div class="bigContent">
          <div class="lowContain">
            <span class="font">科目</span>
            <div class="noticContent1">
              <el-input
                type="textarea"
                :rows="1"
                placeholder="请输入内容"
                v-model="subject">
              </el-input>
            </div>
          </div>
          <div class="lowContain">
            <span class="font">内容</span>
            <div class="noticContent2">
              <el-input
                type="textarea"
                :rows="7"
                placeholder="请输入内容"
                v-model="textarea">
              </el-input>
            </div>
          </div>
          <div class="create">
            <el-button type="primary" @click="toSubmit">提问</el-button>
          </div>
        </div>
    </div>
    </div>
  </div>
</template>

<script>
import http from '../../../util/http';

export default {
  name: 'refresh',
  inject: ['reload'],
  data() {
    return {
      tableData: [],
      search: '',
      subject: '',
      textarea: '',
    };
  },
  methods: {
    toSubmit() {
      if (this.subject === '' || this.textarea === '') {
        this.$message.error('信息不能为空');
      } else {
        http.post(`/questionAPI/addQuestion?stu_id=${window.localStorage.getItem('userId')}
          &subject_name=${this.subject}&content=${this.textarea}`)
        .then((res) => {
          this.$message({
            message: '已成功发布提问！',
            type: 'success',
          });
          console.log(res);
          this.refresh();
        })
        .catch((error) => {
          console.log(error);
        });
      }
    },
    refresh() {
      this.reload();
    },
  },
};
</script>
<style scoped>
.stu-create{
  margin: 0 2.5rem 0 0;
  width: 13rem;
}
.titleSty{
  color: white;
  font-size: .7rem;
  margin: 0 0 0 .5rem;
}
.homeworkList{
  box-shadow:.1rem .06rem .15rem #888;
  margin-top: .5rem;
  height: 12rem;
}
.demo-table-expand .el-form-item {
  margin: 0;
  width: 90%;
}
.body{
  display: block;
}
.create{
  margin: 1rem 0 0 5.5rem;
}
.el-button {
  background-color: #66cccc;
	color: white;
  border:#66cccc;
}
.bigContent{
  width: 13rem;
	height: 12rem;
  background-color: white;
	box-shadow: 0.1rem 0.06rem 0.15rem #888;
	margin: 0 auto 0;
}
.lowContain{
  padding: 2rem 0 0 1rem;
}
.font{
  font-size:0.53rem;
  font-family:"\5FAE\8F6F\96C5\9ED1";
	color: #66CCCC;
}
.noticContent1{
  width: 5rem;
  margin: -.6rem 0 0 1.5rem;
}
.noticContent2{
  margin: -.5rem 0 0 1.5rem;
  width: 8rem;
}
.el-button:hover{
  background-color: #FAACA8;
}
</style>
